import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Index from './pages/Index'
import Video from './pages/video'
import WorkPlace from './pages/workPlace'
import './index.css'

function router () {
    const routeConfig = [
        {path:'/', title:'博客首页', exact:true, component:Index},
        {path:'/video', title:'视频教程', exact:false, component:Video},
        {path:'/workPlace', title:'职场技能', exact:false, component:WorkPlace},
    ]
    return (
        <Router>
            <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                
                <ul>
                    {
                       routeConfig.map((item,index) => {
                           return (
                               <li key={index}><Link to={item.path}>{item.title}</Link></li>
                           )
                       }) 
                    }
                </ul>

                {/* <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="/workPlace">职场技能</Link> </li>
                </ul> */}
            </div>
            
            <div className="rightMain">
                {
                    routeConfig.map((item,index) => {
                        return (
                            <Route key={index} exact={item.exact} path={item.path} component={item.component}/>
                        )
                    })
                }

                {/* <Route path="/"  exact component={Index} />
                <Route path="/video/" component={Video} />
                <Route path="/workPlace" component={WorkPlace} /> */}
            </div>
          </div>
        </Router>
    )
}

export default router